<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../js/babel.min.js"></script>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
</head>
<body>
    <div id="example1"></div>
    <div id="example2"></div>
</body>
</html>
<script type="text/babel">
class Like extends React.Component{
    constructor(props){
        super(props)
        this.state={
            flag:false
        }
        //将新增方法中的this强制绑定为组件对象
        this.handleClick=this.handleClick.bind(this)//必须重新复制，因为bind是产生新的函数,原函数不变
    }
    //内部方法的this指向是组件本身，但是自定义方法，this指向underfined
    //后期如果使用箭头函数就不需要这么复杂了
    handleClick(){
        this.setState({flag:!this.state.flag})
    }
    render(){
        const {flag}=this.state;
        return <h2 onClick={this.handleClick}>{flag?"测试变化":"变化测试"}</h2>
    }
}
ReactDOM.render(<Like/>,document.getElementById('example1'))

</script>